<!DOCTYPE html>
<html>

<head>
    <title>留言板</title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
</head>

<body>
    <div class="lybox">
        <% if(user){ %>
            <p class="logSuccess">
                欢迎你: <span><%=user.username%></span>
                <a href="/users/logout">退出</a>
            </p>
        <% }else{ %>
            <p class="regLog" >
                <span>登陆后可以留言!</span>
                <a href="/users/login">登陆</a>
                <a href="/users/reg">注册</a>
            </p>
        <% } %>

        <h2>全部留言</h2>
        <table>
            <thead>
                <tr>
                    <th>昵称</th>
                    <th>内容</th>
                    <th>时间</th>
                </tr>
            </thead>
            <tbody>
                <%if(list){%>
                    <%list.forEach(item=>{%>
                        <tr>
                            <td><%=item.nicheng%></td>
                            <td><%=item.con%></td>
                            <td><%=item.time%></td>
                        </tr>
                    <%});%>
                <%}%>
                <!--
                <tr>
                    <td>小刀</td>
                    <td>中国将为空间站飞行任务选拔约18名预备航天员</td>
                    <td>2018-04-24</td>
                </tr>
                <tr>
                    <td>万利</td>
                    <td>火上浇油!美国在台湾用这件事试探中国底线</td>
                    <td>2018-04-23</td>
                </tr>
                -->
            </tbody>
        </table>
    </div>
    <% if(user){ %>
        <div class="lycon">
            <form action="/addly" method="post">
                <input type="text" name="nicheng" class="nc" placeholder="昵称" readonly="readonly" value="<%=user.username%>"><br/>
                <textarea type="text" name="con" placeholder="请写下你要发表的内容!" rows="7"></textarea>
                <input type="submit" value="发表" />
            </form>
        </div>
    <% } %>
    <script>
        function $$(selector){
            return document.querySelector(selector);
        }

        var submit = $$('input[type=submit]');
        submit.addEventListener('click',function(e){
            e.preventDefault();
            fetch(e.target.parentNode.action,{
                method : 'post',
                headers: new Headers({
                    // 'Accept': 'application/json',
                    'Content-Type': 'application/json'
                }),
                body : JSON.stringify({nicheng:$$('input[name=nicheng]').value,con: $$('textarea[name=con]').value})
            }).then(result=>{
                return result.json();
            }).then(data=>{
                addLyCon(data);
            });
        });
        function addLyCon(data){
            var tbody = $$('.lybox table tbody');
            var tr = document.createElement('tr');
            for(key in data){
                var td = document.createElement('td');
                td.textContent = data[key];
                tr.append(td);
            }
            tbody.prepend(tr);
        }


    </script>
</body>

</html>
